import { GroupDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Group);

## Usage

`Group` is a horizontal flex container. If you need a vertical flex container, use [Stack](/core/stack)
component instead. If you need to have full control over flex container properties, use [Flex](/core/flex) component.

<Demo data={GroupDemos.usage} />

## preventGrowOverflow

`preventGrowOverflow` prop allows you to control how `Group` children should behave when there is not enough
space to fit them all on one line. By default, children are not allowed to take more space than
`(1 / children.length) * 100%` of parent width (`preventGrowOverflow` is set to `true`). To change
this behavior, set `preventGrowOverflow` to `false` and children will be allowed to grow and take
as much space as they need.

<Demo data={GroupDemos.preventGrowOverflow} />

## Group children

**!important** `Group` works correctly only with React elements.
Strings, numbers, fragments may have incorrect styles if `grow` prop is set:

```tsx
// Invalid Group usage, do not do this
import { Group } from '@mantine/core';

function InvalidDemo() {
  return (
    <Group grow>
      First string
      <>
        <div>element inside fragment</div>
        <div>another inside fragment</div>
      </>
      {20}
    </Group>
  );
}
```

<FlexboxGapSupport component="Group" />
